<template>
    <div class="headder">
        <div class="head-title wMax">
            <img v-if="logoUrl" :src="BASE_URL + logoUrl" alt="logo">
            <i class="logo-text" :title="logoTxt">{{logoTxt}}</i>
            <i class="point">.</i>
            <i>大数据</i>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            baseUrl: process.env.BASE_URL,
            logoUrl: sessionStorage.getItem("logoUrl"),
            logoTxt: sessionStorage.getItem("siteTitle"),
        };
    },
};
</script>

<style lang="scss">
.headder {
    .head-title {
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: url("../../../assets/images/bdheadimg.png") center bottom
            no-repeat;
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 100%;
            height: 26px;
            background-color: rgba(166, 199, 255, 0.05);
        }
        img {
            margin-right: 20px;
        }
        img,
        i {
            vertical-align: middle;
        }
        i {
            font-size: 24px;
            font-weight: bold;
            color: rgba(107, 244, 255, 1);
            background: linear-gradient(
                0deg,
                rgba(184, 219, 255, 1) 0%,
                rgba(130, 183, 255, 1) 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .logo-text{
            display: inline-block;
            max-width: 100px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .point {
            margin: 0 5px;
        }
    }
}
</style>
